<template>
  <div>
    <div style="position:absolute;top:0;z-index:9;height:50px;width:calc(100% - 48px);">
      <div style="width:100%;height:100%;background-color: white;margin-left:15px;margin-right:15px;padding: 10px;">
        <el-button type="primary" @click="submitForm">提 交</el-button>
        <el-button type="primary" @click="handleSave">暂 存</el-button>
      </div>
    </div>
    <div class="app-container" :style="{ height: mainHeight }" style="overflow-y:auto;padding-top: 50px;">
      <el-row :gutter="20">
        <el-col :lg="24" :xs="24" class="mb-[12px]">
          <el-card style="min-width: 480px;margin-bottom: 18px;">
            <el-form
              ref="projectFormRef"
              :model="formData"
              :rules="rules"
              label-width="100px"
            >
              <div class="form-flex">
                <el-form-item label="项目名称" prop="projectName" class="form-item">
                  <el-input v-model="formData.projectName" />
                </el-form-item>
              </div>
              <div class="form-flex">
                <el-form-item label="开发部门" prop="departmentId" class="form-item">
                  <el-tree-select
                    v-model="formData.departmentId"
                    :data="departmentTree"
                    check-strictly
                    :render-after-expand="false"
                    node-key="id"
                    :props="departmentTreeProps"
                    style="width: 240px"
                  />
                </el-form-item>
                <el-form-item label="项目经理" prop="projectManager" class="form-item">
                  <el-select v-model="formData.projectManager" @change="handleProjectManager" filterable>
                    <el-option
                    v-for="item in userList"
                    :key="item.userId"
                    :value="item.userId"
                    :label="item.nickName"/>
                  </el-select>
                </el-form-item>
              </div>
              <div class="form-flex">
                <el-form-item label="产品经理" prop="productManager" class="form-item">
                  <el-select v-model="formData.productManager" @change="handleProductManager" filterable>
                    <el-option
                    v-for="item in userList"
                    :key="item.userId"
                    :value="item.userId"
                    :label="item.nickName"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="实际启动时间" prop="beginDate" class="form-item">
                  <el-date-picker
                    v-model="formData.beginDate"
                    type="date"
                    :disabled="true"
                  />
                </el-form-item>
              </div>
              <div class="form-flex">
                <el-form-item label="计划结束时间" prop="planEndDate" class="form-item">
                  <el-date-picker
                    v-model="formData.planEndDate"
                    type="date"
                  />
                </el-form-item>
                <el-form-item label="实际结束时间" prop="endDate" class="form-item">
                  <el-date-picker
                    v-model="formData.endDate"
                    type="date"
                    :disabled="true"
                  />
                </el-form-item>
              </div>
              <div class="form-flex">
                <el-form-item label="项目类型" prop="projectType" class="form-item">
                  <el-select v-model="formData.projectType">
                    <el-option label="N类全新项目" value="1" />
                    <el-option label="A类改进项目" value="2" />
                    <el-option label="B类改进项目" value="3" />
                    <el-option label="R类预研项目" value="4" />
                  </el-select>
                </el-form-item>
                <el-form-item class="form-item">
                </el-form-item>
              </div>
              <el-form-item label="项目背景" prop="projectBackground">
                <el-input v-model="formData.projectBackground" :rows="4" type="textarea" />
              </el-form-item>
              <el-form-item label="项目目标" prop="projectTarget">
                <el-input v-model="formData.projectTarget" :rows="4" type="textarea" />
              </el-form-item>
              <el-form-item label="项目风险" prop="projectRisk">
                <el-input v-model="formData.projectRisk" :rows="4" type="textarea" />
              </el-form-item>
              <div class="form-flex">
                <el-form-item label="附件" prop="attachments" class="form-item">
                  <el-upload
                    v-model:file-list="fileList"
                    class="upload-demo"
                    action="/api/bus/upload/uploadFiles"
                    multiple
                    :on-remove="handleRemove"
                    :limit="3"
                    :on-success="handleFileSuccess"
                    :before-upload="beforeFileUpload"
                  >
                    <el-button type="primary">上传附件</el-button>

                  </el-upload>
                </el-form-item>
              </div>
            </el-form>
          </el-card>

          <el-collapse v-model="activeNames">
            <el-collapse-item title="项目里程碑" name="1" style="margin-bottom: 18px;">
              <el-table
                :data="milestoneTableData"
                border
                style="margin:10px"
              >
                <el-table-column label="序号" width="70" align="center">
                  <template #default="{ $index }">
                    {{ $index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column label="里程碑" prop="milestoneName" width="180" align="center">
                  <template v-slot="scope">
                    <span v-if="scope.row.milestoneName">{{scope.row.milestoneName}}</span>
                    <el-select v-model="scope.row.milestoneName" v-else>
                      <el-option
                      v-for="item in milestones"
                      :key="item"
                      :value="item"
                      :label="item"
                      :disabled="milestoneTableData.map(obj => obj.milestoneName).includes(item) ? true : false"/>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="任务" prop="milestoneTask" width="250" align="center">
                </el-table-column>
                <el-table-column label="计划完成时间" prop="milestoneDate" width="250" align="center">
                  <template v-slot="scope">
                    <el-date-picker
                      v-model="scope.row.milestoneDate"
                      type="date"
                    />
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="" width="100">
                  <template v-slot="scope">
                    <el-link @click="addMilestoneRows(scope)" v-if="milestoneTableData.length < 7">
                      <el-icon><CirclePlus /></el-icon>
                    </el-link>
                    <el-link @click="deleteMilestoneRows(scope)" v-if="milestoneTableData.length > 3" style="margin-left:5px">
                      <el-icon><Delete /></el-icon>
                    </el-link>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>

            <el-collapse-item title="项目组成员" name="2" style="margin-bottom: 18px;">
              <el-table
                :data="memberTableData"
                border
                style="margin:10px"
              >
                <el-table-column label="序号" width="70" align="center">
                  <template #default="{ $index }">
                    {{ $index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column label="角色" prop="memberType" width="180" align="center">
                  <template v-slot="scope">
                    <span v-if="scope.row.memberType == '项目经理' || scope.row.memberType == '产品经理'" style="color:red">*</span>
                    <span v-if="scope.row.memberType">{{scope.row.memberType}}</span>
                    <el-select v-model="scope.row.memberType" v-else>
                      <el-option
                      v-for="item in memberTypes"
                      :key="item"
                      :value="item"
                      :label="item"
                      :disabled="memberTableData.map(obj => obj.memberType).includes(item) ? true : false"/>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="项目组成员" prop="userIdArr" width="250" align="center">
                  <template v-slot="scope">
                    <el-select v-model="scope.row.userIdArr" multiple filterable>
                      <el-option
                      v-for="item in userList"
                      :key="item.userId"
                      :value="item.userId"
                      :label="item.nickName"/>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="" width="100">
                  <template v-slot="scope">
                    <el-link @click="addMemberRows(scope)" v-if="memberTableData.length < 9">
                      <el-icon><CirclePlus /></el-icon>
                    </el-link>
                    <el-link @click="deleteMemberRows(scope)" v-if="scope.row.memberType != '项目经理' && scope.row.memberType != '产品经理'" style="margin-left:5px">
                      <el-icon><Delete /></el-icon>
                    </el-link>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>

            <el-collapse-item title="关联需求" name="3">
              <div class="search-container">
                <el-form ref="queryRequirementFormRef" :model="queryRequirementParams" :inline="true">
                  <el-form-item prop="title" label="关键字">
                    <el-input
                      v-model="queryRequirementParams.title"
                      placeholder="需求标题"
                      clearable
                      @keyup.enter="handleQueryRequirement"
                    />
                  </el-form-item>
          
                  <el-form-item>
                    <el-button type="primary" @click="handleQueryRequirement"
                      ><i-ep-search />搜索</el-button
                    >
                    <el-button @click="handleResetQueryRequirement"><i-ep-refresh />重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <el-table
                ref="requirementTableRef"
                v-loading="loading"
                :data="requirementList"
                @selection-change="handleSelectionChange"
                :row-key="getRowKey"
                highlight-current-row
                border
              >
                <el-table-column type="selection" width="55" :reserve-selection="true" />
                <el-table-column label="需求编码" prop="code" min-width="150" />
                <el-table-column label="需求标题" prop="title" min-width="250" />
                <el-table-column label="创建人" prop="nickName" width="120" />
                <el-table-column label="创建时间" prop="createTime" width="180" />
                <el-table-column label="创建部门" prop="departmentName" width="150" />
              </el-table>

              <pagination
                v-if="totalRequirement > 0"
                v-model:total="totalRequirement"
                v-model:page="queryRequirementParams.page"
                v-model:limit="queryRequirementParams.size"
                @pagination="handleQueryRequirement"
              />
            </el-collapse-item>
          </el-collapse>

          <!-- 流程设置弹窗 -->
          <el-dialog
            v-model="workNodesVisible"
            title="流程配置"
            width="550px"
            @close="handleCloseDialog"
          >
            <el-table
              ref="workNodesRef"
              v-loading="loading"
              :data="workNodeList"
              highlight-current-row
              border
            >
              <el-table-column label="节点名称" prop="nodeName" min-width="120" />
              <el-table-column label="处理人" prop="userId" min-width="150" >
                <template #default="{ row }">
                  <el-select placeholder="请选择处理人" v-model="row.userId" filterable>
                    <el-option
                    value="0"
                    label="请选择"/>
                    <el-option
                    v-for="item in userList"
                    :key="item.userId"
                    :value="item.userId"
                    :label="item.nickName"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="是否启用" prop="inuse" width="150" >
                <template #default="{ row }">
                  <el-radio-group v-model="row.inuse">
                    <el-radio value="1">是</el-radio>
                    <el-radio value="0">否</el-radio>
                  </el-radio-group>
                </template>
              </el-table-column>
            </el-table>

            <template #footer>
              <div class="dialog-footer">
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
                <el-button @click="handleCloseDialog">取 消</el-button>
              </div>
            </template>
          </el-dialog>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ProjectApply",
  inheritAttrs: false,
});

import ProjectAPI, { ProjectData } from "@/api/project";
import DeptAPI, { DeptTree } from "@/api/dept";
import UserAPI from "@/api/user";
import RequirementAPI, { RequirementPageQuery, RequirementPageVO } from "@/api/requirement";
import router from "@/router";
import { useSettingsStore, useTagsViewStore } from "@/store";
import variables from "@/styles/variables.module.scss";

const mainHeight = computed(() => {
  if (useSettingsStore().tagsView) {
    return `calc(100vh - ${variables["navbar-height"]} - ${variables["tags-view-height"]})`;
  } else {
    return `calc(100vh - ${variables["navbar-height"]})`;
  }
});

const route = useRoute();
const tagsViewStore = useTagsViewStore();
const settingsStore = useSettingsStore();
const projectFormRef = ref(ElForm);

// 部门选择框
const departmentTree = ref([]);
const departmentTreeProps = reactive({
  label: 'title'
})
// 人员选择框
const userList = ref([]);

// 项目表单
const formData = reactive<ProjectData>({
  processId: 0,
  workNodes: '',
});
const rules = reactive({
  projectName: [{ required: true, message: "请输入项目名称", trigger: "blur" },{ min: 1, max: 50, message: '输入长度在 1 到 50 个字符', trigger: 'blur' }],
  projectManager: [{ required: true, message: "请选择项目经理", trigger: "blur" }],
  productManager: [{ required: true, message: "请选择产品经理", trigger: "blur" }],
  departmentId: [{ required: true, message: "请选择开发部门", trigger: "blur" }],
  projectType: [{ required: true, message: "请选择项目类型", trigger: "blur" }],
  projectBackground: [{ required: true, message: "请输入项目背景", trigger: "blur" },{ min: 1, max: 512, message: '输入长度在 1 到 512 个字符', trigger: 'blur' }],
  projectTarget: [{ required: true, message: "请输入项目目标", trigger: "blur" },{ min: 1, max: 512, message: '输入长度在 1 到 512 个字符', trigger: 'blur' }],
});

const fileList = ref<UploadUserFile[]>([])
const handleFileSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  formData.attachments = response.data
}
const beforeFileUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 50) {
    ElMessage.error('文件大小不能超过50MB!')
    return false
  }
  return true
}
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  // console.log(file, uploadFiles)
}

// 面板收缩
const activeNames = ref(['1', '2', '3']);

// 里程碑-项目阶段
const milestones = ref(["立项阶段", "需求阶段", "方案阶段", "实现阶段", "验证阶段", "发布阶段", "结项阶段"]);
// 里程碑-列表数据
const milestoneTableData = ref([
  { "milestoneName": "立项阶段", "milestoneTask": "阶段评审", "milestoneDate": "" }, 
  { "milestoneName": "需求阶段", "milestoneTask": "阶段评审", "milestoneDate": "" },
  { "milestoneName": "方案阶段", "milestoneTask": "阶段评审", "milestoneDate": "" },
  { "milestoneName": "实现阶段", "milestoneTask": "阶段评审", "milestoneDate": "" },
  { "milestoneName": "验证阶段", "milestoneTask": "阶段评审", "milestoneDate": "" },
  { "milestoneName": "结项阶段", "milestoneTask": "阶段评审", "milestoneDate": "" },
]);
// 里程碑-添加行
const addMilestoneRows = scope => {
  milestoneTableData.value.splice(scope.$index, 0, { "milestoneName": "", "milestoneTask": "阶段评审", "milestoneDate": "" })
}
// 里程碑-删除行
const deleteMilestoneRows = scope => {
  milestoneTableData.value.splice(scope.$index, 1)
}

// 项目组成员-角色
const memberTypes = ref(["项目经理", "产品经理", "部门领导", "UI设计师", "前端开发", "后端开发", "测试工程师", "项目管理", "项目成员"]);
// 项目组成员-列表数据
const memberTableData = ref([
  { "memberType": "项目经理", "userIdArr": [] }, 
  { "memberType": "产品经理", "userIdArr": [] },
]);
// 项目组成员-添加行
const addMemberRows = scope => {
  memberTableData.value.splice(scope.$index + 1, 0, { "memberType": "", "userIdArr": [] })
}
// 项目组成员-删除行
const deleteMemberRows = scope => {
  memberTableData.value.splice(scope.$index, 1)
}

// 关联需求
const queryRequirementFormRef = ref(ElForm);
const totalRequirement = ref(0);
const requirementTableRef = ref();
const queryRequirementParams = reactive<RequirementPageQuery>({
  title: "",
  status: 3,
  page: 1,
  size: 5,
});
const requirementList = ref<RequirementPageVO[]>();
// 查询需求
function handleQueryRequirement() {
  loading.value = true;
  RequirementAPI.getPage(queryRequirementParams)
    .then(({data}) => {
      requirementList.value = data.list;
      totalRequirement.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}
// 需求重置查询
function handleResetQueryRequirement() {
  queryRequirementFormRef.value.resetFields();
  queryRequirementParams.title = '';
  queryRequirementParams.status= 3;
  queryRequirementParams.page = 1;
  handleQueryRequirement();
}
function getRowKey(row){
  return row.id;
}
// 需求选中
function handleSelectionChange(selection) {
  formData.requirements = selection.map(item => item.id);
}

// 项目经理选择事件
function handleProjectManager(value){
  memberTableData.value.forEach(s => {
    if (s.memberType == "项目经理"){
      s.userIdArr = [value];
    }
  })
}

// 产品经理选择事件
function handleProductManager(value){
  memberTableData.value.forEach(s => {
    if (s.memberType == "产品经理"){
      s.userIdArr = [value];
    }
  })
}

// 实例节点设置相关
const workNodesVisible = ref(false);
const workNodesRef = ref(ElForm);
const workNodeList = ref([]);

const loading = ref(false);
/** 提交项目表单 */
const submitForm = () => {
  projectFormRef.value.validate((valid: any) => {
    if (valid) {
      for(let i = 0; i < milestoneTableData.value.length; i++){
        let milestoneData = milestoneTableData.value[i];
        if (milestoneData.milestoneName == "" || milestoneData.milestoneDate == ""){
          ElMessage.warning("请检查里程碑，确保不出现空值");
          return;
        }
      }
      for(let j = 0; j < memberTableData.value.length; j++){
        let memberData = memberTableData.value[j];
        if (memberData.memberType == "" || memberData.userIdArr.length == 0){
          ElMessage.warning("请检查项目组成员，确保不出现空值");
          return;
        }
      }
      if (route.query.workId){ // 流程已启动，直接提交
        handleSubmit();
      }
      else{ // 流程未启动，启动实例节点配置
        workNodesVisible.value = true;
      }
    }
  });
}
const handleSubmit = () => {
    // 处理附件
    let files = [];
    for(let i = 0; i < fileList.value.length; i++){
      if (fileList.value[i].response){
        files.push(fileList.value[i].response.data[0])
      }
      else{
        let fileJson = {};
        fileJson.name = fileList.value[i].name;
        fileJson.url = fileList.value[i].url;
        files.push(fileJson);
      }
    }
    formData.attachments = JSON.stringify(files);
    formData.milestones = milestoneTableData.value;
    formData.members = memberTableData.value;
    // 处理节点配置
    if (!route.query.workId){
      let nodes = [];
      let counter = 0;
      for(let i in workNodeList.value ){
        let workNode = workNodeList.value[i];
        let tmp = [workNode.nodeId, workNode.userId, workNode.inuse];
        nodes.push(tmp.join(","));
        if (workNode.inuse == "0"){
          counter++;
        }
      }
      // 不允许全部审批节点禁用
      if (counter == workNodeList.value.length){
        ElMessage.warning("不允许禁用所有节点");
        return;
      }
      formData.workNodes = nodes.join(";");
    }
    loading.value = true;
    ProjectAPI.apply(formData)
        .then((data) => {
          ElMessage.success(data.msg);
          ElMessage.success(data.data);
          if (settingsStore.tagsView){
            tagsViewStore.closeCurrentView();
          }
          router.push({ path: '/projectList/view' });
        })
        .finally(() => (loading.value = false));
}

/** 保存项目表单 */
const handleSave = () => {
  projectFormRef.value.validate((valid: any) => {
    if (valid) {
      for(let i = 0; i < milestoneTableData.value.length; i++){
        let milestoneData = milestoneTableData.value[i];
        if (milestoneData.milestoneName == "" || milestoneData.milestoneDate == ""){
          ElMessage.warning("请检查里程碑，确保不出现空值");
          return;
        }
      }
      for(let j = 0; j < memberTableData.value.length; j++){
        let memberData = memberTableData.value[j];
        if (memberData.memberType == "" || memberData.userIdArr.length == 0){
          ElMessage.warning("请检查项目组成员，确保不出现空值");
          return;
        }
      }
      loading.value = true;
      // 处理附件
      let files = [];
      for(let i = 0; i < fileList.value.length; i++){
        if (fileList.value[i].response){
          files.push(fileList.value[i].response.data[0])
        }
        else{
          let fileJson = {};
          fileJson.name = fileList.value[i].name;
          fileJson.url = fileList.value[i].url;
          files.push(fileJson);
        }
      }
      formData.attachments = JSON.stringify(files);
      formData.milestones = milestoneTableData.value;
      formData.members = memberTableData.value;
      ProjectAPI.save(formData)
          .then(({data}) => {
            formData.id = data; // id回写
            ElMessage.success("暂存成功");
          })
          .finally(() => (loading.value = false));
    }
  });
}

function handleCloseDialog(){
  workNodesVisible.value = false;
}

onMounted(() => {
  if (route.query.id){
    ProjectAPI.getById(route.query.id).then(({data}) => {
      if (data){
        formData.id = data.id;
        formData.projectCode = data.projectCode;
        formData.projectName = data.projectName;
        formData.projectManager = data.projectManager;
        formData.productManager = data.productManager;
        formData.departmentId = data.departmentId;
        formData.beginDate = data.beginDate;
        formData.endDate = data.endDate;
        formData.planEndDate = data.planEndDate;
        formData.projectType = data.projectType;
        formData.projectBackground = data.projectBackground;
        formData.projectTarget = data.projectTarget;
        formData.projectRisk = data.projectRisk;
        formData.attachments = data.attachments;
        if (formData.attachments){
          let files = JSON.parse(formData.attachments);
          for(let i = 0; i < files.length; i++){
            fileList.value.push({name: files[i]["name"], url: files[i]["url"]});
          }
        }
        if (data.milestones){
          milestoneTableData.value = data.milestones;
        }
        if (data.members){
          for (let i = 0; i < data.members.length; i++){
            let member = data.members[i];
            let isExist = false;
            for (let j = 0; j < memberTableData.value.length; j++){
              let data = memberTableData.value[j];
              if (data.memberType == member.memberType){
                isExist = true;
                data.userIdArr.push(member.userId);
              }
            }
            if (!isExist){
              memberTableData.value.push({ "memberType": member.memberType, "userIdArr": [member.userId] })
            }
          }
        }
        if (data.requirementList){
          data.requirementList.forEach((row) => {
            requirementTableRef.value!.toggleRowSelection(
              row,
              undefined,
              false
            )
          })
        }
      }
    })
  }
  else if (route.query.workId){
    ProjectAPI.getByWorkId(route.query.workId).then(({data}) => {
      if (data){
        formData.id = data.id;
        formData.projectCode = data.projectCode;
        formData.projectName = data.projectName;
        formData.projectManager = data.projectManager;
        formData.productManager = data.productManager;
        formData.departmentId = data.departmentId;
        formData.beginDate = data.beginDate;
        formData.endDate = data.endDate;
        formData.planEndDate = data.planEndDate;
        formData.projectType = data.projectType;
        formData.projectBackground = data.projectBackground;
        formData.projectTarget = data.projectTarget;
        formData.projectRisk = data.projectRisk;
        formData.attachments = data.attachments;
        if (formData.attachments){
          let files = JSON.parse(formData.attachments);
          for(let i = 0; i < files.length; i++){
            fileList.value.push({name: files[i]["name"], url: files[i]["url"]});
          }
        }
        if (data.milestones){
          milestoneTableData.value = data.milestones;
        }
        if (data.members){
          for (let i = 0; i < data.members.length; i++){
            let member = data.members[i];
            let isExist = false;
            for (let j = 0; j < memberTableData.value.length; j++){
              let data = memberTableData.value[j];
              if (data.memberType == member.memberType){
                isExist = true;
                data.userIdArr.push(member.userId);
              }
            }
            if (!isExist){
              memberTableData.value.push({ "memberType": member.memberType, "userIdArr": [member.userId] })
            }
          }
        }
        if (data.requirementList){
          data.requirementList.forEach((row) => {
            requirementTableRef.value!.toggleRowSelection(
              row,
              undefined,
              false
            )
          })
        }
      }
    })
  }

  if (route.query.processId) {
    formData.processId = route.query.processId;
  }

  ProjectAPI.getFlowNodes().then(({data}) => {
    if (data){
      for (let i in data){
        workNodeList.value.push({nodeId: data[i].nodeId, userId: "0", inuse: "1", nodeName: data[i].nodeName })
      }
    }
  })

  // 获取部门树
  DeptAPI.getTree()
    .then(({data}) => {
      departmentTree.value = data;
  })

  // 获取用户列表
  UserAPI.getUserList()
    .then(({data}) => {
      userList.value = data;
  })

  handleQueryRequirement();
});
</script>

<style type="text/css">
  .form-flex {
    display: flex;
    gap: 10px; /* 间距 */
    margin-bottom: 18px;
  }
  .form-item {
    flex: 1; /* 使所有表单项平均分配空间 */
    margin: 0; /* 移除默认的 margin */
  }
  .el-collapse-item__header{
    padding-left: 10px;
    font-size: 14px;
    font-weight: bold;
  }
</style>

